﻿@model MvcShopping.Models.Product
@{
    var ajaxOption = new AjaxOptions()
    {
        OnSuccess = "AddToCartSuccess",
        OnFailure = "AddToCartFailure",
        HttpMethod = "Post"
    };
}
<link href="~/Content/goodlunbo.css" rel="stylesheet" />
@section scripts {

    @Scripts.Render("~/bundles/jqueryval")
    <script>
        var M = {}
        function AddToCartSuccess() {
            if (M.dialog11) {
                return M.dialog11.show();
            }
            M.dialog11 = jqueryAlert({
                'icon': 'images/alert/right.png',
                'animateType': 'scale',
                'content': '加入购物车成功',
                'closeTime': 2000,
            })
        }
        function AddToCartFailure(xhr) {
            if (M.dialog11) {
                return M.dialog11.show();
            }
            M.dialog11 = jqueryAlert({
                'icon': 'images/alert/error.png',
                'animateType': 'scale',
                'content': '加入购物车失败',
                'closeTime': 2000,
            })
            //alert('加入购物车失败 (HTTP 状态码: ' + xhr.status + ')');
        }
    </script>
}
<link href="~/Content/alert.css" rel="stylesheet" />
<script src="~/Scripts/alert.js"></script>
<div id="productdetail" class="col-xs-12">
    <div class="col-xs-10 col-xs-off-2">

        <h3 style="display:inline-block">你正在查看 @Model.productCategory.Name : @Model.Name</h3>
        <a href="javascript:window.history.go(-1);" style="color:lightgrey">返回列表</a>
    </div>
    <div class="col-xs-12">
        <div>
            <div class="lunbo">
                <div class="fugai">
                    <div class="fugai1"></div>
                    <div class="fugai2"></div>
                    <div class="fugai3"></div>
                    <div class="cb"></div>
                </div>

                <div class="dianzui">
                    <div class="dian"></div>
                </div>
                <div class="box">
                    <img src="~/images/testimg/goodsdetail/lunbo2.jpg" />
                    <img src="~/images/testimg/goodsdetail/lunbo5.jpg" />
                    <img src="~/images/testimg/goodsdetail/lunbo3.jpg" />
                    <img src="~/images/testimg/goodsdetail/lunbo4.jpg" />
                    <img src="~/images/testimg/goodsdetail/lunbo5.jpg" />
                    <img src="~/images/testimg/goodsdetail/lunbo6.jpg" />
                    <img src="~/images/testimg/goodsdetail/lunbo2.jpg" />
                </div>
                <div class="btn">
                    <div class="btn-l fl"><</div>
                    <div class="btn-con-l fl"></div>

                    <div class="btn-r fr">></div>
                    <div class="btn-con-r fr">r</div>


                </div>

                <ul class="list-li">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        var i = 0;
        var stop;
        /*	每隔2秒运行一次轮播*/
        stop = setInterval(function () {
            i++;
            if (i > 6) {
                i = 1;
            }
            xiaoguo2(i);
            xiaoguo(i);
        }, 4000)
        /*	动作函数*/
        function xiaoguo2(n) {
            /*		块一*/
            $('.fugai1')
                .css({ "background-image": "url(~/images/testimg/goodsdetail/lunbo" + n + ".jpg)", 'background-repeat': 'no-repeat', 'display': 'block', "backgroundPosition-x": 0 + 'px' })
                .animate({ "backgroundPosition-x": -730 + 'px' }, 3000)
                .css({ 'display': 'none' })
            //块二
            $('.fugai2')
                .css({ "background-image": "url(~/images/testimg/goodsdetail/lunbo" + n + ".jpg)", 'background-repeat': 'no-repeat', 'display': 'block', "backgroundPosition-x": -200 + 'px' })
                .animate({ "backgroundPosition-x": -730 * 2 + 'px' }, 3000)
                .animate({ 'display': 'none' })
            //块三
            $('.fugai3')
                .css({ "background-image": "url(~/images/testimg/goodsdetail/lunbo" + n + ".jpg)", 'background-repeat': 'no-repeat', 'display': 'block', "backgroundPosition-x": 0 + 'px' })
                .animate({ "backgroundPosition-x": -730 * 3 + 'px' }, 3000)
                .animate({ 'display': 'none' })
            /*		$('.fugai')
                .css({"background-image":"url(image/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'})
                .deplay(3000).animate({"backgroundPosition-x":-730*3+'px'},3000)
                .animate({'display':'none'},10)		*/
        }
        $('.list-li>li').eq(0).css({ 'background-color': 'orange' })
        function xiaoguo(n) {
            var b = n - 1;
            $('.list-li>li').css({ 'background-color': '#F9263E' })
            $('.list-li>li').eq(b).css({ 'background-color': 'orange' })
            $('.dian').animate({ 'width': 730 + 'px' }, 2000)
            $('.dian').animate({ 'width': 0 + 'px' }, 100)
            $('.box').animate({ 'margin-left': -n * 730 + 'px' }, 2000, function () {
                if (n == 6) {
                    $('.box').css({ 'margin-left': 0 + 'px' })
                }
            })
        }
        /*	左右按钮*/
        function huan(n) {
            var j = i;
            i = i + n;

            if (i > 6) {
                i = 1;
            }
            if (i < 0) {
                i = 5;
            }
            xiaoguo(i);
        }
        //左箭头
        $('.btn-l').click(function () {
            clearInterval(stop);
            stop = null;
            huan(-1);
            if (i == 0) {
                $('.btn-con-l').html('<img src="~/images/testimg/goodsdetail/lunbo' + parseInt(6) + '.jpg">')
            } else {
                $('.btn-con-l').html('<img src="~/images/testimg/goodsdetail/lunbo' + parseInt(i) + '.jpg">')
            }
            $('.box').stop(true, true);
            $('.dian').stop(true, true);

        });
        //右箭头
        $('.btn-r').click(function () {
            clearInterval(stop);
            stop = null;
            huan(1);
            if (i == 5) {
                $('.btn-con-r').html('<img src="~/images/testimg/goodsdetail/lunbo' + parseInt(1).toString() + '.jpg">')
            } else if (i == 6) {
                $('.btn-con-r').html('<img src="~/images/testimg/goodsdetail/lunbo' + parseInt(2).toString() + '.jpg">')
            } else {
                $('.btn-con-r').html('<img src="~/images/testimg/goodsdetail/lunbo' + parseInt(i + 2).toString() + '.jpg">')
            }
            $('.box').stop(true, true);
            $('.dian').stop(true, true);
        });
        //$('.btn-l').click(function(){huan(-1);});
        //$('.btn-r').click(function(){huan(1);});

        /*	鼠标放上大块*/
        $('.lunbo').mouseover(function () {
            clearInterval(stop);
            stop = null;
            $('.btn').show();

        })
        /*	鼠标离开大块*/
        $('.lunbo').mouseout(function () {
            if (stop == null) {
                stop = setInterval(function () {
                    i++;
                    if (i > 6) {
                        i = 1;
                    }
                    xiaoguo(i);
                    xiaoguo2(i);
                }, 4000)
            }
            $('.btn').hide();
            $('.btn-con-l').text('');
            $('.btn-con-r').text('');
        })
        /*按钮小标题*/
        $('.list-li>li').mouseover(function () {
            clearInterval(stop);
            stop = null;
            i = Number($(this).text());
            xiaoguo($(this).text())
            $('.box').stop(true, true);
            $('.dian').stop(true, true);
        })
    </script>
    <div class="col-xs-12">
        <div class="col-xs-1"></div>
        @*<legend>@Html.DisplayNameFor(m=>m)</legend>*@
        @*<img alt="" src="~/@Model.Url" style="float:left;width:180px;height:180px;" />*@
        <div style="float:left;margin:30px" class="col-xs-8">
            <ul class="list-group" id="specialList">
                <li class="list-group-item">
                    @Html.DisplayNameFor(model => model.Description) :
                    @Html.DisplayFor(model => model.Description)
                </li>
                <li class="list-group-item">
                    @Html.DisplayNameFor(model => model.Price) :
                    @Html.DisplayFor(model => model.Price) 元/件
                </li>
                <li class="list-group-item">
                    @Html.DisplayNameFor(model => model.PublishOn) :
                    @Html.DisplayFor(model => model.PublishOn)
                </li>
                <li class="list-group-item">
                    销量 :
                    @Html.DisplayFor(model => model.SellNums) 件
                    <p style="float:right;">
                        @Ajax.ActionLink("加入购物车", "AddToCart", "Cart", new { ProductId = Model.Id }, ajaxOption)
                    </p>
                </li>
            </ul>

        </div>

    </div>
</div>
